<template>
  <svg id='vital-region-fill'>

    <template   v-for="(item, i) in vitalRegionFills" :key="i"> 
        <line v-if="item.type === 'line'" v-bind="item.other"/>
        <PolygonFillLine v-if="item.type === 'polygon'" v-bind="item.other"/>
        <SymbolSvg v-if="item.type === 'symbol'" v-bind="item.other"/>
    </template>
        <!-- {
          vitalRegionFillSvg.map((item, i) => {
            const {type, ...other} = item;
            return (
              type === 'line' ?
                <line key={i} {...other}/> :
                type === 'polygon' ?
                  <PolygonFillLine key={i} {...other}/> :
                  type === 'symbol' ?
                    <SymbolSvg key={i} {...other}/> : null
            )
          })
        } -->
      </svg>
</template>

<script setup lang="ts">

import {reactive, ref, onMounted,computed,watch,getCurrentInstance} from "vue"

import SymbolSvg from '../common/SymbolSvg.vue';

const props = defineProps({
  config: Object,
});

let vitalRegionFills = ref([])


  /**
   * @method 解析绘制封闭区间数据(房颤等)
   * @param {Object} props
   * @returns {Array}
   */
   let parseVitalRegionFill = () => {
    let {config, items, scale, unit, showSize, split} = props.config;
    let vitalRegionFillToConfig = config['vitalRegionFillToConfig'] || {};
    let linePenIdToStyle = config['linePenIdToStyle'] || {};
    let symbolIdToStyle = config['symbolIdToStyle'] || {};
    let vitalShowToConfig = config['vitalShowToConfig'] || {};
    let {width, height} = showSize || {};
    let vitalRegionFillSvg = [];
    let keyToVitalRegionFill = {};

    items = props.config.showData.items;
    // items = items || [];
    let groupNameToKey = {};

    // 获取符合条件的数据
    for (let i = 0; i < items.length; i++) {
      let attr = items[i]['_attr'];
      let {vitalsigns, vitalsignsvalues, cellindex, disScale, groupName} = attr;
      let vitalsignsKey = groupName || vitalsigns;
      if(groupName){
        groupNameToKey[groupName] = vitalsigns;
      }

      if (vitalRegionFillToConfig[vitalsigns]) {
        if (!keyToVitalRegionFill[vitalsignsKey]) {
          keyToVitalRegionFill[vitalsignsKey] = [];
        }
        let nameShowConfig = vitalShowToConfig[vitalsigns]||{};
        if(disScale!==undefined && nameShowConfig.columnsInDay){
          cellindex = disScale * (7*nameShowConfig.columnsInDay)
        }
        keyToVitalRegionFill[vitalsignsKey].push({
          config: vitalRegionFillToConfig[vitalsigns],
          data: attr,
          value: vitalsignsvalues,
          cellIndex: cellindex
        })
      }
    }

    // 绘制线条
    for (let name in keyToVitalRegionFill) {
      const pointData = keyToVitalRegionFill[name];
      const configKey = groupNameToKey[name]
      const config = vitalRegionFillToConfig[configKey];
      const baseValue = config['base-value']; // 初始值
      const curScale = config['scale'];          // 每个小格所占刻度
      const symbolId = config['symbol'];      // 符号id
      const penId = config['pen-id'];
      const penStyle = linePenIdToStyle[penId] || {};
      const styleColor = penStyle['color'];
      const styleWidth = penStyle['pen-width'];
      const penSolid = penStyle['pen-style']; // pen-style： 画数据线的样式（1为实线、2为虚线）

      // 特殊处理的部分
      let maxValue = config['max-value']; // 最大值
      let showMaxValue = config['show-max-value']; // 超过最大值显示位置
      let minValue = config['min-value']; // 最小值
      let showMinValue = config['show-min-value']; // 低于最小值显示位置

      // 绘制样式参数等
      const options = {
        scale, unit, width, height,
        lineStyle: {
          stroke: styleColor ? `rgba(${styleColor})` : 'rgba(0,0,0,1)',
          strokeWidth: styleWidth,
          strokeDasharray: penSolid === 2 ? "3,3" : undefined
        }
      };

      // 多边形连线
      let polygonPoints = [];
      for (let i = 0; i < pointData.length; i++) {
        const point = pointData[i];
        const vitalsignsvalues = point.data.vitalsignsvalues;
        let showValue = vitalsignsvalues;

        if (maxValue && showValue > maxValue) {
          showValue = showMaxValue;
        } else if (minValue && showValue < minValue) {
          showValue = showMinValue;
        }

        let disConfigCx = !split ? config.cx / 2 : 0;
        const x = config.x + disConfigCx + config.cx * point.cellIndex;
        const y = config.y - (showValue - baseValue) / curScale * config.cy;

        // 统计多边形的点
        polygonPoints.push({x, y});

        // 绘制符号
        const symbolStyle = symbolIdToStyle[symbolId] || {};
        vitalRegionFillSvg.push({
          type: 'symbol',
          vitalsignsvalues: vitalsignsvalues,
          unit, scale, x1: x, y1: y, config, ...symbolStyle
        });
      }
      polygonPoints.push(polygonPoints[0]);
      vitalRegionFillSvg.push({
        type: 'polygon',
        options, polygonPoints,
        onContextMenu: props.config.onContextMenu,
        showLine: config.showLine
      });
    }

    return vitalRegionFillSvg
  }


onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  let vitalRegionFillData = parseVitalRegionFill();
  vitalRegionFills.value = vitalRegionFillData;

})
</script>

<style lang="scss" scoped>

</style>
